
var app=new Vue({
    el:"#app",
    data:{
        userinfo:{
            id:"",
            username:"",
            password:"",
            email:"",
            created:"",
            status:""
        },
        user:{
            username:"",
            password:"",
            email:""
        },
        searchusername:""
    },
    methods:{
        searchuser:function(){
            axios.get("/user/searchUser?username="+this.searchusername)
                .then(function (response) {
                    alert("搜索成功");
                    $("#table").bootstrapTable('load', response.data.data.list);
                }),function (err) {
                alert("搜索失败");
                console.log(err);
            }
        },
        //激活账户
        activated:function(id){
            axios.post("/user/activate/"+id)
                .then(function (response) {
                    alert("激活了");
                    window.location.reload();
                }),function (err) {
                alert("请求失败");
                console.log(err);
            }
        },
//冻结账户
        freezed:function(id){
            axios.post("/user/freeze/"+id)
                .then(function (response) {
                    alert("冻结成功");
                    window.location.reload();
                }),function (err) {
                alert("请求失败");
                console.log(err);
            }
        },



        inserted:function(user){
            if(this.user.username==null||this.user.username==''||this.user.password==null||this.user.password==''||this.user.email==null||this.user.email==''){
                alert("请填写完整信息");
            }
            else {
                axios.post("/user/addUser", {
                    username: this.user.username,
                    password: this.user.password,
                    email: this.user.email
                })
                    .then(function (response) {
                        alert("添加成功");
                        window.location.reload();
                    }, function (err) {
                        console.log(err);
                        alert("添加失败,请检查信息是否输入正确");
                    })
            }
        },

        edited:function(id){
            var that=this;
            axios.post("/user/update",{
                id:this.userinfo.id,
                username:this.userinfo.username,
/*                password:this.userinfo.password,*/
                email:this.userinfo.email
            })
                .then(function (response) {
                    alert("修改成功");
                    window.location.reload();
                },function (err) {
                    console.log(err);
                    alert("修改失败");
                })
        },

        viewed:function (id) {
            var that=this;
            axios.get("/user/view/"+id)
                .then(function(response){
                    console.log(response);
                    that.userinfo=response.data.data;
                },function (err) {
                    console.log(err);
                })
        }
    }
})


//将返回的json数据调整为表格所需的数据格式, bootstrap table渲染数据格式{total:xx,rows:[]}
// res为服务器返回的数据
function responseHandler(res) {
    console.log(res);
    var datas=[];
    datas.push({total:res.data.total,rows:res.data.list});
    return datas[0];
}

//动态生成操作区域的的按钮
// row.id为每行数据的主键
function opFormatter(value, row, index) {
    var actions=[];
    actions.push('<div class="btn-group btn-group-justified">');
    actions.push('<a  data-toggle="modal" data-target="#myModal" class="btn btn-success' +
        ' btn-sm" href="javascript:void(0)" onclick="view(\''+row.id+'\')">' +
        '<i class="fa fa-user"></i>详情</a>');
    /*actions.push('<a class="btn btn-success btn-sm" href="javascript:void(0)" @onclick="view(\''+row.id+'\')"><i class="fa fa-user"></i>详情</a>');*/
    actions.push('<a data-toggle="modal" data-target="#editUser" ' +
        'class="btn btn-primary btn-sm" href="javascript:void(0)" ' +
        'onclick="view(\''+row.id+'\')"><i class="fa fa-edit"></i>编辑</a>');
    actions.push('<a class="btn btn-warning btn-sm" href="javascript:void(0)" ' +
        'onclick="remove(\''+row.id+'\')"><i class="fa fa-remove"></i>删除</a>');
    if(row.status==1){
    actions.push('<a class="btn btn-info btn-sm"' +
        ' href="javascript:void(0)"' +
        ' onclick="tofreeze(\''+row.id+'\')">' +
        '<i class="fa fa-user-secret"></i>冻结</a>');
    }else{
        actions.push('<a class="btn btn-info btn-sm" ' +
            ' href="javascript:void(0)"' +
            ' onclick="active(\''+row.id+'\')">' +
            '<i class="fa fa-user-secret"></i>激活</a>');
    }
    actions.push('</div>');
    return actions.join('');
}

// 显示当前记录的位置
function idSeqFormatter(value, row, index) {
    //获取当前页面大小以及当前页面
    var options = $('#table').bootstrapTable('getOptions');
    // 返回每条的序号： 每页条数 *（当前页 - 1 ）+ 序号
    return options.pageSize * (options.pageNumber - 1) + index + 1;
}

//定义表格列与json数据字段的对应关系
var columns = [{
    checkbox: true
},
    {
        title: '序号',
        formatter: function (value, row, index) {
            return index + 1;
        }

    },
    {
        field: 'id',
        title: 'ID',
        sortable: true

    },
    {
        field: 'username',
        title: '用户名',
        sortable: true

    },
    {
        field: 'email',
        title: 'Email地址',
        sortable: true
    },

    {
        field: 'created',
        title: '注册时间',
        sortable: true,
    },

    {
        field: 'status',
        title: '状态',
        sortable: true,
        formatter: function (value, row, index) { //格式化输出
            if(row.status==0){return '冻结中';}
            if(row.status==1){return '激活';}
        }
    },
    {
        title: '操作',
        align: 'center',
        formatter: opFormatter
    }
];

//和后台交互的查询参数对象
function queryParams(params) {
    var params = {
        pageSize: params.limit,                         //页面大小
        pageNum: (params.offset / params.limit) + 1,   //页码
        orderColumn: params.sort,        //排序列名
        sortOrder: params.order    //排序命令（desc，asc）
    };
    params['keyword'] = "test";  // 传入查询分页中的关键词或者查询对象
    console.log(params);
    return params;
}

//获取table对象
var table = $('#table');
$(function () {
    var prefix = "";
    //定义表格的相关属性
    var options = {
        //  locale: $('#locale').val(),
        height: 500,    //表格高度
        pagination: true,  // 启动分页
        sortable: true,   //启动排序
        pageList: "[10, 20, 50, All]",  //每页显示的数量
        pageSize: 7,    //默认每页的记录数
        striped: true,   //间隔显示颜色
        url: "/user/userlist",
        //methods:get ,
        responseHandler: responseHandler,  //处理服务器返回的数据格式
        sidePagination: 'server',  //服务器分页则修改为server
        clickToSelect: true,     //单击行进行选择
        multipleSelectRow: true,   //允许多选
        pageNumber: 1,            //默认页面为第一页
        queryParams: queryParams,  //与服务器交互的查询参数
        theadClasses: 'thead-light', //设置表头样式，thead-light,thead-dark,''
        columns: columns           //设置每列的字段内容
    }
    table.bootstrapTable('destroy').bootstrapTable(options);
    //$('#table').init(options);//初始化表格

});
//查看用户详细信息
function view(id) {
    app.viewed(id);
}

function tofreeze(id) {
    app.freezed(id);
}

function active(id) {
    app.activated(id);
}

//编辑记录
function edit(id) {
    app.edituser(id);
}
//删除记录
function remove(id) {
    alert("删除记录" + id);
    $.ajax({
        url: "/user/delete/" + id,
        type: "delete",
        success: function (res) {
            alert("删除成功");
            window.location.reload();
        },
        error: function () {
            alert("请求失败")
        }
    })
}


// 更新表格数据内容
function reload() {
    alert("success");
    $.getJSON(
        "/user/userlist",
        function (data) {
            $("#table").bootstrapTable('load', data.data.list);
        }
    )
}
